<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 12. 将定时器的开始和停止过程书写在不同的事件函数内部，
        容易出现用户多次点击出现加速且运动不能停止的情况，
        请给出解决代码。 -->
        <!-- 思路：利用设表先关的方式方式多次同时调用定时器 -->
        <input type="button" name="" value="开始" id="start">
        <input type="button" name="" value="停止" id="stop">
        <div id="box"></div>
        <script src="common.js"></script>
        <script>
            // 获取元素
            var start = my$("start");
            var stop = my$("stop");
            var box = my$("box");
            // 规定一个信号量，接收移动过程中的位置,信号量和初始位置相同
            var nowLeft = 50;
            // 在全局设置定时器，方便停止按钮使用
            var moveLeft;
            // 给按钮绑定事件函数
            start.onclick = function () {
                // 在启动之前先停止
                clearInterval(moveLeft);
                moveLeft = setInterval(function() {
                    // 让信号量自加，然后赋值给当前的left
                    nowLeft += 20;
                    box.style.left = nowLeft + "px";//记得加单位
                },50);
            };
            // 清除定时器
            stop.onclick = function () {
                clearInterval(moveLeft);
            };
        </script>
</body>
</html>